<script setup>
import { reactive, ref } from 'vue'
import { registerService, loginService } from "@/api/user"
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router"
const router= useRouter();
import {useTokenStore} from '@/stores/token.js'
const tokenStore= useTokenStore();
const ruleFormRef = ref()



//注册数据+登录数据
let registerData = ref({
  username: '',
  password: ''
})

const rules = reactive({
  username: [
    { required: true, message: '请输入您的账号', trigger: 'blur' },
    { min: 5, max: 16, message: '账号的长度范围为5-16个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入您的密码', trigger: 'blur' },
    { min: 5, max: 16, message: '密码的长度范围为5-16个字符', trigger: 'blur' },
  ]
})

const isLogin = ref(true);

//注册接口的调用
const register = async () => {
  //调用注册接口
  let result = await registerService(registerData.value);

  ElMessage.success( result.msg ? result.msg : "注册成功")
}


//登录接口的调用
const login = async () => {
  //调用登录接口
  let result = await loginService(registerData.value)
  //获取token
  tokenStore.setToken(result.data);
  ElMessage.success( result.msg ? result.msg : "登录成功")
  //跳转到首页 -- 路由
  router.push("/");

}

//清空表单数据
const clearData =()=>{
  registerData.value = {
      username: "",
      password: ""
    }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="40vw" id="asideBox">
        <!-- <img src="@/assets/logo2.png" alt=""> -->
      </el-aside>
      <el-container id="formBox">
        <el-header></el-header>
        <el-main>
          <el-card>
            <!-- 登录 -->
            <el-form ref="ruleFormRef" :model="registerData" :rules="rules" label-width="auto" v-if="isLogin">
              <h3>欢迎登录</h3>
              <el-form-item label="账号" prop="username">
                <el-input v-model="registerData.username" />
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input v-model="registerData.password" type="password" show-password />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="login">
                  登录
                </el-button>
              </el-form-item>
              <el-form-item id="toRegister">
                <el-link type="info" @click="isLogin = false;clearData();"> ← 去注册 </el-link>
              </el-form-item>
            </el-form>
            <!-- 注册 -->
            <el-form ref="ruleFormRef" :model="registerData" :rules="rules" label-width="auto" v-else>
              <h3>请注册</h3>
              <el-form-item label="账号" prop="username">
                <el-input v-model="registerData.username" />
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input v-model="registerData.password" type="password" show-password />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="register">
                  注册
                </el-button>
              </el-form-item>
              <el-form-item id="toRegister">
                <el-link type="info" @click="isLogin = true;clearData();"> ← 去登录 </el-link>
              </el-form-item>
            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }

  #asideBox {
    background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }

  #formBox {
    .el-header {
      height: 20vh;
      text-align: center;
      font-size: 40px;
      font-weight: bold;
      line-height: 30vh;
    }

    .el-main {
      height: 50vh;

      .el-card {
        width: 80%;
        margin: auto;
        padding: 50px 80px;

        h3 {
          text-align: center;
          font-size: 24px;
          line-height: 80px;
        }
      }
    }

    .el-form-item {
      display: flex;
      align-items: center;

      .el-input {
        height: 50px;
        font-size: 18px;
      }
    }

    .el-button {
      width: 100%;
      height: 50px;
      line-height: 40px;
      font-size: 20px;
      margin-top: 30px;
    }
  }
}
</style>